<template>
    <div style="margin-top: 50px">
        <!--<div> 上面求和为：{{$store.state.count.sum}}</div>-->
        <div>
            <input type="text" v-model="name" style="margin-right: 50px">
            <button @click="addStudent">添加学员</button>
        </div>
        <ui style="display: block">
            <li
                    style="display: block"
                    v-for="(i,index) in list"
                    :key="index"
            >{{i}}</li>
        </ui>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    export default {
        name: 'formUse',
        data(){
            return {
                // sum:0,
                name:'',
            }
        },
        methods:{
            addStudent(){
                this.$store.commit('formUse/addStudent',this.name)
            },

        },
        computed:{

            ...mapState('formUse',['list'])

        },

        mounted() {
            console.log(this.$store)
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
